<template>
    <div>

        <lab_head />
        <lab_header />

        <div class="vip-header layout-no-margin-top" style="min-height:215px;">
            <h1 class="vip-header-title">加入实验楼会员，拥有自己的实验机</h1>
            <h4 class="vip-header-description">精品课程 + 环境保存 + 实验联网 + 会员客户端</h4>
        </div>
        <div class="vip-details">
            <div class="container">
                <div class="row vip-row hidden-xs">
                    <div class="vip-item">
                        <ul class="list-group">
                            <li class="list-group-item">
                                <h4>&nbsp;</h4>
                            </li>
                            <li class="list-group-item">免费课程</li>
                            <li class="list-group-item">会员课程</li>
                            <li class="list-group-item">
                                <span style="border-bottom:1px dashed" data-toggle="tooltip" data-placement="bottom" title="会员可以保存实验环境，普通用户实验结束后环境删除">实验环境保存</span>
                            </li>
                            <li class="list-group-item">
                                <span style="border-bottom:1px dashed" data-toggle="tooltip" data-placement="bottom" title="会员环境可以连接互联网，普通用户环境仅连接实验楼内网">实验环境联网</span>
                            </li>
                            <li class="list-group-item"><a href="#vip-clients" title="" class="link-clients">会员客户端</a></li>
                            <li class="list-group-item">SSH直连</li>
                            <li class="list-group-item">WebIDE</li>
                            <li class="list-group-item">训练营优惠</li>
                            <li class="list-group-item">
                                <span style="border-bottom:1px dashed" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="在讨论区提问，可以收到专职助教答疑回复">会员课程答疑</span>
                            </li>
                            <li class="list-group-item" style="height:190px;">&nbsp;</li>
                        </ul>
                    </div>
                    <div class="vip-item">
                        <ul class="list-group">
                            <li class="list-group-item">
                                <h4 class="is-free-user">免费</h4>
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="common_user_list.exempt_cour === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="common_user_list.vip_cour === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="common_user_list.save === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="common_user_list.environment === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="common_user_list.client === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="common_user_list.ssh === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="common_user_list.webide === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="common_user_list.discounts === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="common_user_list.exempt_study === 1">&nbsp;
                            </li>
                            <li class="list-group-item item-vip-footer" style="">
                                <strong style="color:#DBDBDB;font-size:28px;display:block;">免费</strong>
                                <br>

                                <a type="button" class="btn btn-all btn-smaller" href="#sign-modal" data-toggle="modal" data-sign="signup">注册</a>

                            </li>
                        </ul>
                    </div>
                    <div class="vip-item">
                        <ul class="list-group">
                            <li class="list-group-item">
                                <h4 class="is-vip-user">会员 <img src="/static/img/icon-vip.png" alt=""></h4>
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="common_vip_list.exempt_cour === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="common_vip_list.vip_cour === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="common_vip_list.save === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="common_vip_list.environment === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="common_vip_list.client === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="common_vip_list.ssh === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="common_vip_list.webide <= 1">&nbsp;
                            </li>
                            <li class="list-group-item rebate-number">
                                <span class="number-eight">
                                    <span style="color: #FC9F0E;font-size: 23px">{{ common_vip_list.discounts }}</span> 折
                                </span>
                            </li>
                            <li class="list-group-item"><img src="/static/img/vip-service-status.png" alt=""></li>
                            <li class="list-group-item item-vip-footer" style="height:195px">
                                <strong class="vip-price" style="font-size: 15px;display:block;margin-bottom: -10px">
                                    <span style="font-size:40px;color:#FC9F0E">￥{{ common_vip_list.price | price_filter }}</span> / 年
                                </strong>
                                <del style="font-size: 12px;color: #999;">原价 599元</del>
                                <br>

                                <a type="button" class="btn btn-bigger btn-all" href="javascript:void(0);" data-toggle="modal" data-sign="signin" data-next="/vip" @click="join(common_vip_list.price,common_vip_list.grade)">加入</a>

                                <p style=""> 实验豆可抵扣现金</p>
                            </li>
                        </ul>
                    </div>
                    <div class="vip-item">
                        <ul class="list-group">
                            <li class="list-group-item">
                                <h4 class="is-adv-vip">高级会员 <img src="/static/img/icon-vip-advance.png" alt=""></h4>
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="expert_vip_list.exempt_cour === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="expert_vip_list.vip_cour === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="expert_vip_list.save === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="expert_vip_list.environment === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="expert_vip_list.client === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="expert_vip_list.ssh === 1">&nbsp;
                            </li>
                            <li class="list-group-item">
                                <img src="/static/img/vip-service-status.png" v-if="expert_vip_list.webide <= 1">&nbsp;
                            </li>
                            <li class="list-group-item rebate-number" style="padding-bottom: 6px;">
                                <span class="number-five">
                                    <span style="color: #CC584C;font-size: 23px;">{{ expert_vip_list.discounts }}</span> 折
                                </span>
                            </li>
                            <li class="list-group-item"><img src="/static/img/vip-service-status.png" alt=""></li>
                            <li class="list-group-item item-vip-footer" style="">
                                <strong class="vip-price" style="font-size: 15px;display:block;margin-bottom: -7px">
                                    <span style="font-size:28px;color:#CC584C">￥{{ expert_vip_list.price | price_filter }}</span> / 年
                                </strong>
                                <del style="font-size: 12px;color: #999;">原价 1024元</del>
                                <br>

                                <a type="button" class="btn btn-bigger btn-all" href="javascript:void(0);" data-toggle="modal" data-sign="signin" data-next="/vip" @click="join(0,expert_vip_list.grade)">加入</a>

                                <p style=""> 实验豆可抵扣现金</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="vip-hots">
            <div class="container">
                <div class="vip-hots-header">
                    <h4>已有 <span>350,000</span> 人在实验楼完成了 <span>6,000,000+</span> 次实验</h4>
                </div>
                <div class="row vip-hots-body">
                    <div class="col-md-4">
                        <div class="media">
                            <div class="media-left">
                                <img class="media-object" src="/static/img/vip-allcourses.png">
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">课程畅学</h4>
                                <p>会员专属精品课程，每周不断更新，给你最快的成长</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="media">
                            <div class="media-left">
                                <img class="media-object" src="/static/img/vip-24.png">
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">随时实践</h4>
                                <p>独享实验机，长期保存，在线开发代码，24小时随时继续</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="media">
                            <div class="media-left">
                                <img class="media-object" src="/static/img/vip-internet.png">
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">优质体验</h4>
                                <p>环境联网，会员客户端+SSH直连+WebIDE，更优实验体验</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="vip-clients" id="vip-clients">
            <div class="container">
                <div class="vip-clients-header">
                    <h4>即开即用的会员客户端，随时随地远程访问实验桌面</h4>
                </div>
                <div class="row vip-clients-body">
                    <div class="col-md-4">
                        <div class="vip-clients-windows vip-clients-logo"></div>
                        <div class="vip-clients-title">Windows - Windows 7 及以上</div>
                        <a href="http://labfile.oss-cn-hangzhou.aliyuncs.com/shiyanlou_desktop/shiyanlou-desktop-v1.0.3-win64.exe">立即下载（64位）</a><br /><a href="http://labfile.oss-cn-hangzhou.aliyuncs.com/shiyanlou_desktop/shiyanlou-desktop-v1.0.3-win32.exe">立即下载（32位）</a>
                        <div class="text-danger" style="font-size:14px;">（安装过程中如果遇到 360 的警告可以忽视）</div>
                    </div>
                    <div class="col-md-4">
                        <div class="vip-clients-mac vip-clients-logo"></div>
                        <div class="vip-clients-title">MacOS - MacOS 10.11 及以上 </div>
                        <a href="http://labfile.oss-cn-hangzhou.aliyuncs.com/shiyanlou_desktop/shiyanlou-desktop-v1.0.3-macos.dmg">立即下载</a>
                    </div>
                    <div class="col-md-4">
                        <div class="vip-clients-linux vip-clients-logo"></div>
                        <div class="vip-clients-title">Linux - Ubuntu 14.04 及以上</div>
                        <a href="http://labfile.oss-cn-hangzhou.aliyuncs.com/shiyanlou_desktop/shiyanlou-desktop-v1.0.3-linux64.deb">立即下载（64位）</a><br /><a href="http://labfile.oss-cn-hangzhou.aliyuncs.com/shiyanlou_desktop/shiyanlou-desktop-v1.0.3-linux32.deb">立即下载（32位）</a>
                    </div>
                    <div class="video">
                        <video controls="controls">
                            <source src="http://labfile.oss-cn-hangzhou.aliyuncs.com/shiyanlou_desktop/desktop.ogg" type="video/ogg">
                            <source src="http://labfile.oss-cn-hangzhou.aliyuncs.com/shiyanlou_desktop/desktop.mp4" type="video/mp4">
                            你的浏览器不支持播放视频
                        </video>
                        <div class="video-play">
                            <i class="fa fa-play-circle-o fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="vip-faq">
            <div class="container">
                <div class="vip-faq-header">
                    <img src="/static/img/vip-faq.png">
                    FAQ
                    <span></span>
                </div>
                <div class="vip-faq-body">
                    <h4>会员课程和免费课程有什么区别？</h4>
                    <div>1. 会员课程多为项目课，免费课程多为基础课。</div>
                    <div>2. 会员课程主要由实验楼团队制作及维护，免费课程由实验楼及合作伙伴共同维护。</div>
                    <div>3. 会员可联网并保存环境，会员课程内容不受网络及时间限制。</div>
                    <div>4. 会员课程更新频率更高，难度会更大。</div>
                </div>
                <div class="vip-faq-body">
                    <h4>会员客户端是什么？</h4>
                    <div>实验楼会员专属的桌面端软件，即开即用，自动连接云端实验桌面，特点:</div>
                    <div>1. 易用：即开即用，随时远程访问实验桌面</div>
                    <div>2. 安全：数据云端保存，HTTPS加密传输</div>
                    <div>3. 跨平台：支持Windows，Mac OSX 及 Linux平台</div>
                    <div>4. 更多功能：实验工具中提供查看文档及一键SSH连接实验环境等</div>
                </div>
                <div class="vip-faq-body">
                    <h4>什么情况下需要保存实验环境？</h4>
                    <div>1. 当时间不多或实验耗时较长，无法连续完成一个实验时。</div>
                    <div>2. 当实验遇到问题但无法及时解决时。</div>
                    <div>3. 当需要一台在线开发环境时。</div>
                </div>
                <div class="vip-faq-body">
                    <h4>环境联网有什么好处？</h4>
                    <div>1. 实验中随时连接站外资源，例如Github等。</div>
                    <div>2. 支持大量联网课程，例如微信微博开发及SaaS开发。</div>
                </div>
                <div class="vip-faq-body">
                    <h4>成功购买会员服务后，是否可以退款？</h4>
                    <div>支付购买成功后，暂不接受退款申请，请详细查看会员服务内容后进行购买，如有任何不清楚的地方欢迎在 <a href="/questions/">讨论区</a> 发帖询问。</div>
                </div>
                <div class="vip-faq-body">
                    <h4>高级会员与普通会员有什么不同？</h4>
                    <div>1. 实验楼提供专职助教，在讨论区为高级会员提供答疑服务，回答学习会员课程过程中遇到的问题。</div>
                    <div>2. 购买训练营享受5折优惠。</div>
                </div>
                <div class="vip-faq-footer">
                    <a href="/questions/1440">更多疑问，查看这里></a>
                </div>
            </div>
        </div>

        <Modal v-model="pay_vip" :middle="true" :hasCloseIcon="true">
            <pay :com_vip_price=300 :price="price" :exp_vip_price=300 :grade="grade" :order="order" />
        </Modal>

        <lab_footer />

    </div>
</template>

<script>
// 导入组件
import lab_head from './common/lab_head';
import lab_header from './common/lab_header';
import lab_footer from './common/lab_footer';
import user_info from './common/user_info';
import last_paths from './common/last_paths';
import QR_code from './common/QR_code';
import pay from './common/pay';
import { config, formatXml } from '../config.js';
// import pay from '';
// 导入axios封装请求
import { get_vip_list_get, get_vip_order_get } from './axios_api/api'
export default {
    data() {
        return {
            // 普通用户权限列表
            common_user_list: [],
            // 普通会员权限列表
            common_vip_list: [],
            // 高级会员权限列表
            expert_vip_list: [],
            pay_vip: false,
            // 会员价格
            price: "100",
            com_vip_price: "200",
            exp_vip_price: "300",
            // 订单号
            order: "",
            grade: "",
        }
    },
    components: {
        lab_head,
        lab_header,
        lab_footer,
        user_info,
        last_paths,
        QR_code,
        pay,
    },
    mounted() {
        this.get_vip_list();
    },
    filters: {
        price_filter(value) {
            value = value / 100
            return value
        },
    },
    methods: {
        // 显示支付model
        join: function (price, grade) {
            let params = { token: localStorage.getItem("token") }
            this.price = price
            this.grade = grade
            // 发送请求到后端
            get_vip_order_get(params).then(resp => {
                if (resp.code === 200) {
                    this.pay_vip = true;
                    this.order = resp.data.order
                } else {
                    alert(resp.message)
                    window.location.href = "/"
                }
            })
        },

        // 获取会员列表
        get_vip_list() {
            get_vip_list_get().then(resp => {
                if (resp.code === 200) {
                    let resp = resp['data']
                    // 赋值普通用户
                    this.common_user_list = resp.vip_list[0]
                    // 赋值普通会员
                    this.common_vip_list = resp.vip_list[1]
                    this.com_vip_price = this.common_vip_list.price
                    // 赋值高级会员
                    this.expert_vip_list = resp.vip_list[2]
                    this.exp_vip_price = this.expert_vip_list.price
                }
            })
        },
    }
}
</script>

<style>
</style>
